<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>mydemo</title>
  <style type="text/css">
    html,
    body,
    ul {
      margin: 0;
      padding: 0;
      overflow: hidden;
      zoom: 1;
    }

    html,
    body {
      height: 100%;
      font: 12px/1.5 Tahoma;
    }

    /*索引区的样式*/

    #tab,
    #div1 {
      border: 1px solid black;
      width: 500px;
      margin: 0 auto;
    }

    #tab {
      border-bottom: 0;
      background: black;
      color: white;
    }

    #tab li {
      width: 60px;
      float: left;
      list-style-type: none;
      line-height: 30px;
      text-align: center;
      padding: 0 10px;
      cursor: pointer;
    }

    #tab li.current {
      background: white;
      color: black;
    }

    /*内容区的样式*/

    #div1 ul {
      padding: 10px 0 0 30px;
      display: none;
      line-height: 25px;
    }
  </style>

</head>

<body>
  <ul id="tab">
    <li class="current">第一节课</li>
    <li>第二节课</li>
    <li>第三节课</li>
  </ul>
  <div id="div1">
    <ul style="display:block;">
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
    </ul>
    <ul>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
    </ul>
    <ul>
      <li>网页特效原理分析网页特效原理分析网页特效原理分析网页特效原理分析网页特效原理分析网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
      <li>网页特效原理分析</li>
    </ul>
  </div>
</body>

<script>
  const lis = document.querySelectorAll('#tab li')
  const divs = document.querySelectorAll('#div1 ul')
  lis.forEach((item,index)=>{
    item.onmouseenter = function (){
      lis.forEach(it=>{
        it.className = ''
      })
      divs.forEach(i=>{
        i.style.display = 'none'
      })
      item.className = 'current'
      divs[index].style.display = 'block'
    }
  })



</script>

</html>